<!-- 回答信息框 组件 -->
<template>
  <div id="answerCard">
    <!-- 回答头部用户信息区域 -->
    <div class="answer_user_box">
      <div class="answer_user_box_up">
        <!-- 用户栏左边头像 -->
        <img src="../../../assets/user-sex-male.png" class="card_user_img">
        <!-- 用户栏中间区域 -->
        <div class="card_user_middle_box">
          <!-- 用户姓名 -->
          <div class="card_user_name">{{ list.nick_name }}</div>
          <!-- 用户签名 -->
          <div class="card_user_sign">{{ list.introduce }}</div>
        </div>
      </div>
      <div class="answer_goodNum">{{ list.good_num }} 人赞同了该回答</div>
    </div>
    <!-- 回答内容区域 -->
    <div class="answer_content_box">
      <p class="card_content_text" :style="isOpen ? changeAnswerContent:none" @click="isOpen=!isOpen">{{ list.content }}</p>
      <div class="btn_open" v-if="!isOpen" @click="isOpen=!isOpen">阅读全文 ↓</div>
    </div>
    <!-- 卡片下边用户操作区域 -->
    <div class="card_function_box">
      <!-- 点赞按钮 -->
      <div class="btn_voteGood" @click="doChangeGood" :style="isGood?changeVoteStyle:none">
        <span v-if="!isGood">赞同</span>
        <span v-if="isGood">已赞同</span>
        {{ list.good_num }}
      </div>
      <!-- 不赞同按钮 -->
      <div class="btn_voteBad" @click="doChangeBad" :style="isBad?changeVoteStyle:none">
        <span v-if="!isBad">踩</span>
        <span v-if="isBad">已踩 </span>
        {{ list.bad_num }}
      </div>
      <!-- 评论按钮 -->
      <div class="btn_comment" @click="doDown">
        <div style="line-height: 37px;float: left;margin-right: 5px"><img src="../../../assets/comment_btn.png" class="btn_comment_img"></div>
        <span style="float: left" v-show="!isCommentOpen">{{ commentList.length }} 条评论</span>
        <span style="float: left" v-show="isCommentOpen">取消评论</span>
      </div>
      <!-- 分析按钮 -->
      <div class="btn_analysis">
        <div style="line-height: 37px;float: left;margin-right: 5px"><img src="../../../assets/share_btn.png" class="btn_comment_img"></div>
        <span style="float: left">分享</span>
      </div>
      <!-- 收藏按钮 -->
      <div class="btn_collection">
        <div style="line-height: 37px;float: left;margin-right: 5px"><img src="../../../assets/collection_btn.png" class="btn_comment_img"></div>
        <span style="float: left">收藏</span>
      </div>
      <!-- 收缩文章按钮 -->
      <div class="btn_close" v-if="isOpen" @click="isOpen=!isOpen">收起 ↑</div>
    </div>
    <!-- 评论区域 -->
    <div class="comment_box" v-if="isCommentOpen">
      <!-- 评论区域头 -->
      <div class="comment_head_box">
        <span class="comment_head_span">{{ commentList.length }} 条评论</span>
      </div>
      <!-- 评论组件内容区域 -->
      <CommentCard @getNewData="getCommentData" v-for="(i, index) of commentList" :key="index" :list="i"></CommentCard>
      <!-- 没有评论输入数据区域 -->
      <CommentInputCard v-if="commentList.length==0&&isCommentOpen" @getNewData="getCommentData" :aid="list.id"></CommentInputCard>
    </div>
  </div>
</template>

<script>
import CommentCard from '../../../components/CommentCard'
import CommentInputCard from '../../../components/CommentInputCard'
export default {
  name: 'answerCard',
  components: {
    'CommentCard': CommentCard,
    'CommentInputCard': CommentInputCard
  },
  props: ['list'],
  data () {
    return {
      isOpen: false,
      isGood: false,
      isBad: false,
      isCommentOpen: false,
      changeCardRightBoxStyle: [{'width': '100%'}, {'padding': '0px'}],
      changeVoteStyle: [{'background-color': '#0084ff'}, {'color': 'white'}],
      changeAnswerContent: [{'max-height': '1000px'}, {'cursor': 'auto'}],
      commentList: []
    }
  },
  computed: {
  },
  methods: {
    doDown () {
      this.isCommentOpen = !this.isCommentOpen
      this.getCommentData()
    },
    doChangeGood () {
      if (this.isGood) {
        this.list.good_num--
      } else {
        this.list.good_num++
      }
      this.isGood = !this.isGood
      if (this.list.isBad) {
        this.list.bad_num--
      }
      this.isBad = false
    },
    doChangeBad () {
      if (this.isBad) {
        this.list.bad_num--
      } else {
        this.list.bad_num++
      }
      this.isBad = !this.isBad
      if (this.isGood) {
        this.list.good_num--
      }
      this.isGood = false
    },
    getCommentData () {
      // this.isCommentOpen = false
      this.axios.get('/api/getComment', {
        params: {
          id: this.list.id,
          state: 0
        }
      })
        .then((response) => {
          this.commentList = response.data.data
          console.log(response)
        })
        .catch((error) => {
          this.$Notice.error({
            title: '通知',
            desc: '接口，异常！'
          })
          console.info(error)
        })
    }
  },
  created () {
    this.getCommentData()
  }
}
</script>

<style scoped>
  @import '../../../../../../static/css/article/AnswerCard.css';
</style>
